<template>
	<view>
		<view class="s-header-screen">
			<view class="s-screen-top">
				<view :class="isMoney?'s-top-item s-active s-bold':'s-top-item'" @tap="click_is_money">价格</view>
				<view :class="sales?'s-top-item s-active s-bold':'s-top-item'" @tap="click_sales">销量</view>
				<view class="s-top-item">
					<s-icon v-if="isList" name="listview" color="#000000" :size="44"  @tap="management"></s-icon>
					<s-icon v-else name="pailie" color="#000000" :size="54"  @tap="management"></s-icon>
				</view>
			</view>
		</view>
		<c-product-list :list="product_list" :isList="isList"></c-product-list>
		<s-no-data v-if="product_list.length<=0&&moreData===false" :fixed="false" :imgUrl="$s.config.getConfig('NoDataImgUrlA')">
			{{$s.config.getConfig('NoDataTitle')}}
		</s-no-data>
		<s-loadmore v-if="moreData"></s-loadmore>
		<s-nomore v-if="product_list.length>0&&moreData===false"></s-nomore>
		<s-scroll-top :scrollTop="scrollTop"></s-scroll-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				key:'',
				product_type_id:0,//商品分类id
				isList:false,
				isMoney:0,
				sales:0,
				paging:null,
				moreData:true,
				product_list:[],//商品列表
			}
		},
		async onLoad(options) {
			if(options.key){
				this.key = options.key
			}
			if(options.product_type_id){
				this.product_type_id = options.product_type_id
			}
			await this.getProduct()
		},
		methods: {
			async getProduct(){
				const paging =  this.$s.model.product.getProduct({
					key:this.key,
					sales:this.sales,
					isMoney:this.isMoney,
					product_type_id:this.product_type_id
				})
				this.paging = paging
				const res = await paging.getMoreData()
				if (!res) {
					return
				}
				this.product_list = res.accumulator
				this.moreData = res.moreData
			},
			//切换显示方式
			management(){
				this.isList = !this.isList;
			},
			//销量排序
			click_sales(){
				this.sales = this.sales==1?0:1;
				this.getProduct()
			},
			// 价格排序
			click_is_money(){
				this.isMoney = this.isMoney==1?0:1;
				this.getProduct()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this.getProduct()
			uni.stopPullDownRefresh()
		},
		//上拉加载更多
		async onReachBottom() {
			const res = await this.paging.getMoreData()
			if(!res){
				return
			}
			this.product_list = res.accumulator
			this.moreData = res.moreData
		}
	}
</script>
<style lang="scss" scoped>
@import 'product_list.scss';
</style>
